<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<style>
    table, table tr th, table tr td {
        border: 1px solid #0094ff;
    }

    table {
        width: 1000px;
        min-height: 25px;
        line-height: 40px;
        text-align: center;
        border-collapse: collapse;
    }
</style>
<body>
<div id="device-box">
    <h1>Device</h1>
    <button id="add_device" onclick="add_device()">add new device</button>
    <br><br>

    <table id="table-device">
        <tr>
            <td>device_id</td>
            <td>name</td>
            <td>type</td>
            <td>addr</td>
            <td></td>
        </tr>
        {% for device in devices %}
            <tr>
                <td>{{ device[0] }}</td>
                <td>{{ device[1] }}</td>
                <td>{{ td[device[2]] }}</td>
                <td>{{ device[3] }}</td>
                <td>
                    <button onclick="modify_device('{{ device[0] }}','{{ device[1] }}','{{ td[device[2]] }}','{{ device[3] }}')">
                        modify
                    </button>
                    <button onclick="confirm_delete_device({{ device[0] }})">delete</button>
                </td>
            </tr>
        {% endfor %}
    </table>

    <div id="device-function">

    </div>

</div>

</body>

<script>
    const dict_t = {};
    {% for t in td2 %}
        dict_t['{{ t }}'] = {{ td2[t] }}
    {% endfor %}
    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }

    function add_device() {
        let device_function = document.getElementById('device-function')
        device_function.innerHTML = "<h2>ADD</h2>\n" +
            "        <p>name:<input type=\"text\" id=\"add-device-name\" style=\"width:250px\"></p>\n" +
            "        <p>type:\n" +
            "            <select name=\"\" id=\"add-device-type\">\n" +
            "                {% for t in td %}\n"+
                "                    <option value=\"{{ td[t] }}\">{{ td[t] }}</option>\n"+
                "                {% endfor %}\n" +
            "            </select></p>\n" +
            "        <p>address:<input type=\"text\" id=\"add-device-addr\" style=\"width:250px\"></p>\n" +
            "        <button onclick=\"confirm_add_device()\">submit</button>"

    }

    function confirm_add_device() {
        let d_name = document.getElementById('add-device-name').value

        let d_type_block = document.getElementById('add-device-type')
        let d_type_num = d_type_block.selectedIndex
        let d_type = d_type_block.options[d_type_num].value

        let d_addr = document.getElementById('add-device-addr').value

        let command =
            {
                "name": d_name,
                "type_id": dict_t[d_type],
                "addr": d_addr
            }

        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000//equipment/addEquipment", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result)
                    }

                }
            }
        }
        xhr.send(JSON.stringify(command))


    }

    function modify_device(device_id, device_name, device_type, device_addr) {
        let device_function = document.getElementById('device-function')
        device_function.innerHTML = "<h2>Modify</h2>\n" +
            "        <p>id:<span id=\"modify-device-id\">" + device_id + "</span></p>\n" +
            "        <p>name:<input type=\"text\" id=\"modify-device-name\"value=" + device_name + " style=\"width:250px\"></p>\n" +
            "        <p>type:\n" +
            "            <select name=\"\" id=\"modify-device-type\">\n" +
            "                {% for t in td %}\n"+
                "                    <option value=\"{{ td[t] }}\">{{ td[t] }}</option>\n"+
                "                {% endfor %}\n" +
            "            </select></p>\n" +
            "        <p>address:<input type=\"text\" id=\"modify-device-addr\" value=" + device_addr + " style=\"width:250px\"></p>\n" +
            "        <button onclick=\"confirm_modify_device()\">submit</button>"

        let d_type_block = document.getElementById('modify-device-type')
        console.log(dict_t[device_type])

        for (let i = 0; i < d_type_block.options.length; i++) {
            console.log(d_type_block.options[i].text)
            if (d_type_block.options[i].text == device_type) {
                console.log(i)
                d_type_block.options[i].selected = true
            }
        }
    }

    function confirm_modify_device() {
        let d_id = document.getElementById('modify-device-id').innerText

        let d_name = document.getElementById('modify-device-name').value

        let d_type_block = document.getElementById('modify-device-type')
        let d_type_num = d_type_block.selectedIndex
        let d_type = d_type_block.options[d_type_num].value

        let d_addr = document.getElementById('modify-device-addr').value

        let command =
            {
                "id": d_id,
                "name": d_name,
                "type_id": dict_t[d_type],
                "addr": d_addr
            }

        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000//equipment/updateEquipment", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result)
                    }

                }
            }
        }
        xhr.send(JSON.stringify(command))

    }

    function confirm_delete_device(device_id) {
        let msg = "您真的确认要删除编号"+device_id+"这台设备吗？"
        console.log(typeof (device_id))
        let command={
            "id":device_id
        }
        if(confirm(msg)==true){
            let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000//equipment/deleteEquipment", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        alert("设备"+device_id+"已删除")
                        location.reload();
                    } else {
                        alert(result)
                    }
                }
            }
        }
        xhr.send(JSON.stringify(command))
        }
    }
</script>
</html>